import React, {Component} from 'react';
import {connect} from "react-redux";
import {DetailWrap, DetailHeader, DetailContent} from './style';
import * as actionCreators from '../../actions/DetailAction';

class Detail extends Component {
    render() {
        const {title, imgUrl, content} = this.props;
        return (
            <DetailWrap>
                <DetailHeader>{title}</DetailHeader>
                <DetailContent>
                    <img className="banner" src={imgUrl} alt="default" />
                    <div dangerouslySetInnerHTML={{__html: content}}></div>
                </DetailContent>
            </DetailWrap>
        )
    }

    componentDidMount() {
        const {getDetailContent} = this.props;
        getDetailContent(this.props.match.params.id);
    }
}

const mapStateToProps = (state) => {
  return {
      title: state.getIn(["detail", "title"]),
      imgUrl: state.getIn(["detail", "imgUrl"]),
      content: state.getIn(["detail", "content"])
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
      getDetailContent(id) {
          dispatch(actionCreators.getDetailContent(id))
      }
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(Detail);